<template>
  <div :class="{ POPbox: isShow }">
    <div class="hint" v-show="isShow">
      <ul class="Head">
        <li class="HeadPhoto"></li>
        <div>
          <li>燃草新人5525</li>
          <li>连续睡觉打卡第1天</li>
        </div>
      </ul>
      <ul class="timers">
        <li>{{ nowTime }}</li>
        <li>晚安了</li>
        <li>全网早睡第18名</li>
      </ul>
      <ul class="fot">
        <li>{{ nowDay }}</li>
      </ul>
      <div class="stateBtn">
        <ul>
          <li @click="showShare = true">分享</li>
          <li @click="isShow = false">完成</li>
        </ul>
        <img
          src="../../img/practice/取消 (2).png"
          alt=""
          @click="isShow = false"
        />
      </div>

      <van-share-sheet
        id="share"
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "PopUp",
  computed: {
    nowTime() {
      return new Date().toString().slice(16, 21);
    },
    nowDay() {
      return new Date().toLocaleString().slice(0, 10);
    },
  },
  data() {
    return {
      isShow: false,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  mounted() {
    this.$bus.$on("PopUpShow", (show) => {
      this.isShow = show;
    });
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style lang="scss">
#share {
  div {
    justify-content: space-evenly;
  }
}
.hint {
  background-image: url(../../img/practice/晚上打卡.jpg);
  background-size: 100% 100%;
  width: 553px;
  height: 641px;
  border-radius: 20px;
  position: fixed;
  top: 439px;
  left: 97px;
}
.Head {
  display: flex;
}
.HeadPhoto {
  width: 80px;
  height: 80px;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 50%;
  margin-top: 51px;
  margin-left: 45px;
}
.Head div li:nth-child(1) {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-top: 51px;
}
.Head div li:nth-child(2) {
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-left: 17px;
  margin-top: 15px;
}
.timers li:nth-child(1) {
  font-size: 72px;
  font-family: DIN;
  font-weight: bold;
  color: #ffffff;
  margin-left: 285px;
  margin-top: 100px;
}
.timers li:nth-child(2) {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-left: 422px;
  margin-top: 15px;
}
.timers li:nth-child(3) {
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-left: 365px;
  margin-top: 8px;
}
.fot li {
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-top: 182px;
  margin-left: 393px;
}
.stateBtn ul {
  display: flex;
  justify-content: center;
  width: 553px;
  margin-top: 73px;
  li {
    text-align: center;
  }
}
.stateBtn li:nth-child(1) {
  width: 164px;
  height: 62px;
  background: #24b92e;
  border-radius: 31px;
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 62px;
  margin-right: 85px;
}
.stateBtn li:nth-child(2) {
  width: 164px;
  height: 62px;
  border: 1px solid #000000;
  border-radius: 31px;
  line-height: 62px;
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.stateBtn img {
  position: fixed;
  top: 1272px;
  left: 349px;
}
</style>